<template>
  <div class="dashboard-container">
    <div class="app-container">
      <Headline title-name="权限设置" />
      <PageTools :show-before="true">
        <template slot="before">
          <el-alert
            title="请谨慎设置权限！"
            type="warning"
            show-icon
            :closable="false"
          />
        </template>
        <template slot="after">
          <el-button type="primary" icon="el-icon-plus" @click="addPermission(1,'0')">新增权限</el-button>
        </template>
      </PageTools>

      <!-- 主要内容 -->
      <el-card>
        <el-table
          :data="permissionList"
          stripe
          style="width: 100%"
          border
          row-key="id"
          :default-expand-all="true"
        >
          <el-table-column
            prop="name"
            label="权限名称"
            width="180"
          />
          <el-table-column
            prop="code"
            label="权限标识"
            width="180"
          />
          <el-table-column
            prop="description"
            label="权限描述"
          />
          <el-table-column label="操作">
            <template slot-scope="{row}">
              <!-- 权限添加只有3种  只能在一级权限下显示添加按钮 二级权限下不能在添加新的权限 -->
              <el-button v-if="row.type === 1" icon="el-icon-plus" type="primary" @click="addPermission(2,row.id)">添加</el-button>
              <el-button icon="el-icon-edit" type="warning" @click="editPermission(row.id)">编辑</el-button>
              <el-button icon="el-icon-delete" type="danger" @click="delPermission(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <!-- 新增权限弹窗 -->
      <el-dialog :visible="addDialog" :title="title" :destroy-on-close="true">
        <el-form label-width="100px" :model="formData" :rules="rules">
          <el-form-item label="权限名称" prop="name">
            <el-input v-model.trim="formData.name" />
          </el-form-item>
          <el-form-item label="权限标识" prop="code">
            <el-input v-model.trim="formData.code" />
          </el-form-item>
          <el-form-item label="权限描述" prop="description">
            <el-input v-model.trim="formData.description" />
          </el-form-item>
          <el-form-item label="激活状态">
            <el-row type="flex" align="middle" style="margin-top:10px">
              <el-switch
                v-model.trim="formData.enVisible"
                style="display: block"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-text="可见"
                inactive-text="不可见"
                active-value="1"
                inactive-value="0"
              />
            </el-row>
          </el-form-item>
          <el-form-item>
            <el-row type="flex" justify="end">
              <el-button @click="closeWindow">取消</el-button>
              <el-button type="primary" @click="ok">确定</el-button>
            </el-row>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getPermissionList, addPermission, getPermissionDetail, updatePermission, delPermission } from '@/api/permission'
import { departmentsTreeData } from '@/utils'
export default {
  data() {
    return {
      permissionList: [],
      addDialog: false,
      formData: {
        type: '1',
        pid: '',
        name: '',
        code: '',
        description: '',
        enVisible: ''
      },
      rules: {
        name: [
          { required: true, trigger: 'blur', message: '权限名称不能为空！' }
        ],
        code: [
          { required: true, trigger: 'blur', message: '权限标识不能为空！' },
          { pattern: /^[a-zA-Z0-9]{4,20}$/, trigger: 'blur', message: '请输入英文或数组组合的任意1-20字符' }
        ],
        description: [
          { required: true, trigger: 'blur', message: '权限描述不能为空！' }
        ]
      }
    }
  },
  computed: {
    title() {
      return this.formData.id ? '编辑权限' : '新增权限'
    }
  },
  created() {
    this.getPermissionList()
  },
  methods: {
    // 获取权限列表
    async getPermissionList() {
      const data = await getPermissionList()
      this.permissionList = departmentsTreeData(data, '0')
      // console.log(this.permissionList)
    },
    // 显示添加窗口
    addPermission(type, id) {
      this.addDialog = true
      this.formData.type = type
      this.formData.pid = id
    },
    // 显示修改窗口
    async editPermission(id) {
      this.addDialog = true
      const data = await getPermissionDetail(id)
      this.formData = data
      console.log(data)
    },
    // 确认提交按钮
    async ok() {
      if (this.formData.id) {
        await updatePermission(this.formData)
      } else {
        await addPermission(this.formData)
      }
      this.$notify({
        title: '成功',
        type: 'success',
        message: this.formData.id ? '编辑成功' : '新增成功'
      })
      this.addDialog = false
      this.getPermissionList()
      // console.log(this.formData)
    },
    // 删除权限
    async delPermission(id) {
      try {
        await this.$confirm('是否确认删除该权限?', '提示')
        await delPermission(id)
        this.$notify({
          title: '成功',
          type: 'success',
          message: '删除成功'
        })
        this.getPermissionList()
      } catch (err) {
        console.log(err)
      }
    },
    // 关闭窗口
    closeWindow() {
      this.formData = {
        type: '1',
        pid: '',
        name: '',
        code: '',
        description: '',
        enVisible: ''
      }
      this.addDialog = false
    }
  }
}
</script>

<style lang="sass" scoped>

</style>
